//请求页面信息

//ajax 返回字符串
/* let http = new XMLHttpRequest();
http.open("get","http://127.0.0.1:8088/shou");
http.send();
http.onreadystatechange = function(){
    if(http.readyState === 4){
        console.log(http.responseText)
    }
} */

//jQuery返回JSON数据
//页面信息请求
$.ajax({
    url:"http://127.0.0.1:8088/shou",
    success(data){
        data.forEach(function(item,a){
            //轮播图插入
            let ul = document.createElement("ul");
            $(ul).attr("style",`background: url(${item.lunbotu}) no-repeat center;`)
            $(ul).appendTo($(".lunbo-tu"));
            //轮播图小圆点插入
            let span = $("<span></span>")
            if(a === 0){
                span.addClass("span")
            }
            $(span).appendTo($(".yuandian"));
            //热搜词插入
            let li = $(`<a href=""><li>${item.resou}</li></a> 
            `);
            $(li).appendTo($(".resou-ul"));
            //创意专题图插入
            let cli = $(`<a href=""><li style="background: url(${item.chuangyitu}) no-repeat center;background-size: cover;">
            </li></a> 
            `)
            $(cli).appendTo($(".changyi-tu"));
            //灵感图册插入
            let linggan = $(`<li style="background: url(${item.linggantu}) no-repeat center;background-size: cover;">
                <a href="">
                    <ul>
                        <li class="lingganzi">${item.lgzi}</li>
                        <li class="lingganli">共<span>${item.lgshu}</span>个作品</li>
                    </ul>
                </a> 
            </li>`)
            linggan.appendTo(".linggan-tu")
            //新图速增插入
            let puBu = {
                body:$(".xintu-tu"),
                div(){
                    //创建div，并赋予属性
                    for(let i = 0;i < data.length;i++){
                        //生成高度时放在循环里面，每循环一次产生的高就不相同。50-350的随机数 Math.round -> 四舍五入
                        let height1 = parseInt(Math.random()*300+50);
                        let box = $(`<a href="http://127.0.0.1/zkhl/qian/shangpinxiangqing.html?id=${item.id}">
                            <li style = "background-image : url(${item.linggantu});background-size : ${height1}px 200px;width : ${height1}px;height : 200px;float : left;margin : 10px;cursor: pointer;"><li></a>
                        `)
                        puBu.body.append(box);
                    }
                }
            }
            puBu.div()
        });
        let n = 0;
        //首页基本变化
        let mian = {
            //top变色
            scroll() {
                var top = $("#top-con").offset().top;//获取导航栏位置距顶部的高度
                if (top === 0) {
                    $('#top').attr('style',"transition: all .5s;");
                } else {
                    $('#top').attr('style',"background:black;transition: all .5s;");
                }
            },
            //轮播图
            add(){
                jQuery(".yuandian span").removeClass();
                jQuery(".yuandian span").eq(n).addClass("span");
                jQuery(".lunbo-tu ul").addClass("ul");
                jQuery(".lunbo-tu ul").eq(n).removeClass();
            },
            diao(){
                //top变色
                $(window).on('scroll', function() {
                    mian.scroll()
                });
                //轮播图
                let spanyuan = document.querySelectorAll("#lunbo-con .yuandian span")
                    //右点
                jQuery("#right").click(function(){
                    if(n !== spanyuan.length - 1){
                        n++;
                    }
                    else{
                        n = 0;
                    }
                    mian.add()
                })
                    //左点
                jQuery("#left").click(function(){
                    if(n !== 0){
                        n--;
                    }
                    else{
                        n = spanyuan.length - 1;
                    }
                    mian.add()
                })
                    //小圆点点
                jQuery(".yuandian span").click(function(){
                    n = jQuery(this).index();
                    mian.add();
                })
                //计时器自动播放
                var jishi = setInterval(function(){
                    $("#right")[0].click()
                },2000)
                $("#lunbo-con").mouseenter(function(){
                    $("#left").fadeIn()
                    $("#right").fadeIn()
                    clearInterval(jishi)
                })
                $("#lunbo-con").mouseleave(function(){
                    $("#left").hide()
                    $("#right").hide()
                    jishi = setInterval(function(){
                        $("#right")[0].click()
                    },2000)
                })
                //搜索栏
                $("#xiala").mouseenter(function(){
                    $("#xiala ul").fadeToggle()
                })
                $("#xiala").mouseleave(function(){
                    $("#xiala ul").fadeToggle()
                })
                //侧边
                $("#cebian .cbl1").mouseenter(function(){
                    $("#cebian .kf").fadeToggle()
                })
                $("#cebian .cbl1").mouseleave(function(){
                    $("#cebian .kf").fadeToggle()
                })
                $("#cebian .cbl2").mouseenter(function(){
                    $("#cebian .shoucang").fadeToggle()
                })
                $("#cebian .cbl2").mouseleave(function(){
                    $("#cebian .shoucang").fadeToggle()
                })
                $("#cebian .cbl3").mouseenter(function(){
                    $("#cebian .hui").fadeToggle()
                })
                $("#cebian .cbl3").mouseleave(function(){
                    $("#cebian .hui").fadeToggle()
                })
            },
        }
        mian.diao();
    },
})

//页面加载是top颜色
window.onload = function(){
    var top = $("#top-con").offset().top;//获取导航栏位置距顶部的高度
    if (top === 0) {
        $('#top').attr('style',"transition: all .5s;");
    } else {
        $('#top').attr('style',"background:black;transition: all .5s;");
    }
}